<script setup lang="ts">
import { isMobile } from "@/utils/utils"
import { isDev } from "@/utils/env"
import { onBeforeUnmount } from "vue"
import { useFullscreen } from "@vueuse/core"
import fetch from "@/api/fetch.js"
import { getUserConfig } from "@/utils/config"
import { i18n } from "@/utils/i18n"
import { gsap } from "gsap"
import { Physics2DPlugin } from "gsap/Physics2DPlugin"
gsap.registerPlugin(Physics2DPlugin)
import useAppStore from "@/pinia"
const app = useAppStore()
import AudioController from "./components/audioController.vue"
import { KinkyDungeonWeapons, KinkyDungeonWeaponsList, KinkyDungeonWeaponsType, KinkyDungeonWeaponsTags } from "@/utils/kd.js";

app.initKeyBoardBase() // 将全局键盘实例挂载到pinia

const { isFullscreen, enter: enterFullscreen } = useFullscreen()
const fc = () => {
    // if (isDev) return // 开发环境不自动全屏
    if (!isFullscreen.value) enterFullscreen()
}
// 移动端 全屏
if (isMobile()) document.addEventListener("click", fc)

// 初始化语言
const userConfig = getUserConfig()
const lang = userConfig.lang || "en"
i18n.global.locale = lang

// 销毁时 取消监听
onBeforeUnmount(() => {
    document.removeEventListener("click", fc)
    if (app.goEasyBase) app.goEasyBase.disconnectGoEasy() // 断开goeasy连接
})

// 禁用右键菜单
document.addEventListener("contextmenu", (e) => {
    e.preventDefault()
})

function initConfettiClick() {
    document.addEventListener("click", (event) => {
        const dotCount = gsap.utils.random(5, 10, 1) // 随机生成5到10个点
        const colors = ["rgba(255, 77, 240)", "rgba(255, 77, 240, 0.8)", "rgba(255, 77, 240, 0.6)"] // 颜色数组
        const container = document.getElementById("appPanel") as HTMLElement
        for (let i = 0; i < dotCount; i++) {
            // 创建一个点
            const dot = document.createElement("div")
            dot.classList.add("clickDot")
            // 添加到容器中
            container.appendChild(dot)
            // 设置点的初始状态
            gsap.set(dot, {
                backgroundColor: gsap.utils.random(colors), // 随机颜色
                top: event.clientY, // 鼠标点击位置
                left: event.clientX,
                scale: 0, // 初始大小为0
            })
            // 创建一个动画
            gsap.timeline({
                onComplete: () => dot.remove(), // 动画完成后移除点
            })
                .to(dot, {
                    scale: gsap.utils.random(0.3, 1), // 随机大小
                    duration: 0.3, // 动画时长
                    ease: "power3.out", // 动画缓动函数
                })
                .to(
                    dot,
                    {
                        duration: 2, // 动画时长
                        physics2D: {
                            // 物理效果
                            velocity: gsap.utils.random(500, 1000), // 随机速度
                            angle: gsap.utils.random(0, 360), // 随机角度
                            gravity: 1500, // 重力效果
                        },
                        autoAlpha: 0, // 动画结束后透明度为0
                        ease: "none", // 动画缓动函数
                    },
                    "<" // 动画开始时间 为上一个动画结束时间
                )
        }
    })
}

initConfettiClick()

console.log('KinkyDungeonWeapons',KinkyDungeonWeapons)
console.log('KinkyDungeonWeaponsList',KinkyDungeonWeaponsList)
console.log('KinkyDungeonWeaponsType',KinkyDungeonWeaponsType)
console.log('KinkyDungeonWeaponsTags',KinkyDungeonWeaponsTags)


</script>

<template>
    <div class="appPanel" id="appPanel">
        <router-view v-slot="{ Component }">
            <transition leave-active-class="leave" enter-active-class="enter" mode="out-in">
                <keep-alive>
                    <component :is="Component" />
                </keep-alive>
            </transition>
        </router-view>
    </div>
    <AudioController />
</template>

<style lang="scss" scoped>
.appPanel {
    width: 100vw;
    height: 100vh;
    background: #111;
    overflow: hidden;

    .leave {
        animation: leave 0.2s ease-in-out;
    }

    .enter {
        animation: enter 0.3s ease-in-out;
    }

    @keyframes leave {
        0% {
            transform: translateX(0);
            opacity: 1;
        }

        100% {
            transform: translateX(-10%);
            opacity: 0;
        }
    }

    @keyframes enter {
        0% {
            opacity: 0.4;
        }

        100% {
            opacity: 1;
        }
    }
}
</style>
